<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>刮刮乐</title>
		<style type="text/css">
			#c1 {
				/* border: 1px solid blue; */
				position: absolute;
			}

			#c2 {
				border: 1px solid red;
			}

			body {
				position: relative;
			}
			html,
			body {
				-webkit-overflow-scrolling: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="c1" width="1728" height="2304"></canvas>
		<canvas id="c2" width="1728" height="2304"></canvas>
	</body>
	<script type="text/javascript">
		// let clientWidth = document.body.clientWidth;
		let clientWidth = 1728;
		
		console.log(clientWidth, '--1');
		var c1 = document.getElementById('c1');
		var c2 = document.getElementById('c2');

		var ctx1 = c1.getContext('2d');
		var ctx2 = c2.getContext('2d');

		let allheight = clientWidth *  1.75;
		// c1.width = clientWidth;
		// c1.height = allheight;
		// c2.width = clientWidth;
		// c2.height = allheight;

		// 绘制图片到底层  canvas2
		var imgs = new Image();
		imgs.src = 'img/bugxq.jpg';
		imgs.onload = function () {
			ctx2.drawImage(this, 0, 0);
		};

		// 涂层绘制到顶层(即覆盖膜)  canvas1
		ctx1.fillStyle = 'lightgray';
		ctx1.fillRect(0, 0, 1728, 2304);

		ctx1.font = 'normal 80px 仿宋';
		ctx1.strokeStyle = 'slateblue';
		ctx1.strokeText('请刮开！', 320, 750);

		let isPhone = IsPhoneFn();
		let startY,
			endY,
			isScroll = false;
		// 组织浏览器橡皮筋效果
		document.body.addEventListener(
			'touchmove',
			function (e) {
				// if (isScroll) return;
				e.preventDefault();
			},
			{ passive: false }
		);
		console.log('检测缓存1');
		// 监听canvas的onmousedown事件
		if (isPhone) {
			c1.addEventListener('touchmove', touchMoveEvent, {
				passive: false,
			});
			function touchMoveEvent(e) {
				// console.log(e, '--1', event);
				e.preventDefault();
				mouseX = event.touches[0].pageX;
				mouseY = event.touches[0].pageY;

				// console.log(e);
				var w = 100; // 清除区域的宽度
				var h = 100; // 清除区域的高度
				var x = mouseX - c1.offsetLeft - w / 2; // 清除区域的x位置
				var y = mouseY - c1.offsetTop - h / 2; // 清除区域的y位置
				ctx1.clearRect(x, y, w, h);
			}
		} else {
			c1.onmousedown = function (ev) {
				c1.onmousemove = function (e) {
					// console.log(e);
					var w = 50; // 清除区域的宽度
					var h = 50; // 清除区域的高度
					var x = e.pageX - c1.offsetLeft - w / 2; // 清除区域的x位置
					var y = e.pageY - c1.offsetTop - h / 2; // 清除区域的y位置
					ctx1.clearRect(x, y, w, h);
				};
			};
			c1.onmouseup = function (ev) {
				// 取消onmousemove事件
				c1.onmousemove = null;
			};
		}

		//
		function IsPhoneFn() {
			//获取浏览器navigator对象的userAgent属性（浏览器用于HTTP请求的用户代理头的值）
			let info = navigator.userAgent;
			//通过正则表达式的test方法判断是否包含“Mobile”字符串
			let isPhone = /mobile/i.test(info);
			//如果包含“Mobile”（是手机设备）则返回true
			return isPhone;
		}
	</script>
</html>
